<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getSignUpList } from '@/package-mine/api/registration-record'
import type { ListItemDto } from '@/package-mine/api/registration-record/type'

const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    hasNext: true,
})
const list = ref([] as ListItemDto[])
function getData() {
    getSignUpList({
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
    }).then((res) => {
        if (pageInfo.value.pageNum === 1)
            list.value = res.list || []
        else
            list.value = [...res.list, ...list.value]
        pageInfo.value.hasNext = res.hasNextPage
    })
}
function onNextpPage() {
    if (pageInfo.value.hasNext) {
        pageInfo.value.pageNum++
        getData()
    }
}
function toDetail(val: number | string) {
    console.log(val)
    uni.navigateTo({
        url: `/package-mine/pages/job-detail/job-detail?from=signUp&id=${val}`,
    })
}
onLoad(() => {
    getData()
})
</script>

<template>
    <NavbarContainer nav-title="我的报名">
        <scroll-view class="mycontainer pt-30rpx" @scrolltolower="onNextpPage">
            <view v-for="(item, i) in list" :key="i" class="card-box" @click="toDetail(item.jobId)">
                <view class="top-box">
                    <view class="fs-32 bold">{{ item.jobName }}</view>
                </view>
                <view class="bottom-box">
                    <view class="flex items-center justify-between">
                        <view class="fs-24 fc-gray">{{ item.serveCompanyName }}</view>
                        <view class="fs-32 bold fc-orange">{{ item.salary }}{{ item.jobSalaryType }}</view>
                    </view>
                    <view class="fs-24 fc-lightgray mg-t-20">报名时间：{{ item.createTime }}</view>
                </view>
            </view>
            <view v-if="!list.length" class="box-border w-full pt-350rpx text-center">暂无数据</view>
        </scroll-view>
    </NavbarContainer>
</template>

<style scoped>
.mycontainer {
    padding: 30rpx 30rpx 0;
    background: #fafafc;
    min-height: calc(100vh);
    padding-bottom: (30rpx + constant(safe-area-inset-bottom));
    padding-bottom: (30rpx + env(safe-area-inset-bottom));
}

.card-box {
    background: #fff;
    margin-bottom: 30rpx;
    border-radius: 16rpx;
}

.top-box {
    padding: 30rpx 24rpx 10rpx;
    border-bottom: 1rpx solid #F4F4F7;
}

.bottom-box {
    padding: 24rpx;
}

.mg-t-20 {
    margin-top: 20rpx;
}

.fs-32 {
    font-size: 32rpx;
}

.bold {
    font-weight: bold;
}

.fc-gray {
    color: #565868;
}

.fc-lightgray {
    color: #9497B1;
}

.fc-orange {
    color: #FF7642;
}

.list-container {
    margin-top: 30rpx;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "报名记录"
    }
}
</route>
